<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangjie
 * @Date: 2021-03-11 11:22:33
 * @LastEditors: 杨镜
 * @LastEditTime: 2022-11-04 21:17:24
-->

<template v-if="show">
  <!--发货页-->
  <KiFormDialog
    :show.sync="dialogVisible"
    title="订单详情"
    v-model="form.data"
    :submit="submit"
    :before-close="()=>{$emit('update:show',false)}"
  >
    <template #el-form>
      <template v-if="receiptInfo">
        <h3 class="subtitle"><span>收货信息</span></h3>
        <div class="flex justify-between">
          <UnivariateTable>
            <tr>
              <td>姓名</td>
              <td>{{ receiptInfo.name }}</td>
              <td>电话</td>
              <td>{{ receiptInfo.phone }}</td>
            </tr>
            <tr>
              <td>地址</td>
              <td>{{ receiptInfo.areaName + receiptInfo.address}}</td>
            </tr>
          </UnivariateTable>
        </div>
      </template>
      <p></p>
      <el-form-item label="物流公司" prop="logisticsCompany" verify>
        <KiSelect
          v-model="form.data.logisticsCompany"
          :options="expressCompany"
          :props="{
            value: 'name',
            label: 'name'
          }"
          placeholder="请选择物流公司"
        />
      </el-form-item>
      <el-form-item label="物流单号" prop="logisticsNum" :verify="{ minLength: 6, maxLength: 30}">
        <el-input v-model="form.data.logisticsNum" placeholder="请输入物流单号" clearable maxlength="30" show-word-limit />
      </el-form-item>
    </template>
  </KiFormDialog>

</template>

<script>

export default {
  props: {
    show: Boolean,
    parentRowOrderId: String,
    expressCompany: Array
  },
  data() {
    return {
      form: {
        data: {}
      },
      dialogVisible: false,
      receiptInfo: {},
      orderId: ''
    }
  },
  watch: {
    'parentRowOrderId' (newVal) {
      if(newVal) {
        this.orderId = newVal
      }
    },
    'show' (newVal) {
      this.dialogVisible = newVal
      if (newVal) {
        this.queryOrderDetail(this.$attrs.parentRowOrderId)
      }
    },
  },
  methods: {
    queryOrderDetail() {
      this.$POST('sot-admin-api/vip/vip-order-web/queryOrderDetail', {
        orderId: this.orderId
      }).then( _ => {
        this.receiptInfo = _.data.receiptInfo
      })
    },
    submit() {
      return this.$POST('sot-admin-api/vip/vip-order-web/shipHandler', {
        ...this.form.data,
        orderId: this.receiptInfo.orderId
      }).then( _ => {
        this.$emit('refresh')
      })
    },
  }
}
</script>
<style lang="scss" scoped>
</style>

